<template>
  <com-card>
    <div slot="com_title">账号列表</div>
    <div slot="com_content">
        <el-row>
            <el-table :data="dataSource">
                <el-table-column label="创建时间">
                    <template #default="{row}">
                        {{row.ctime | timeMF}}
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="账号"></el-table-column>
                <el-table-column prop="userGroup" label="用户组"></el-table-column>
                <el-table-column label="操作">
                        <!-- <template v-slot:default="{row}"> -->
                            <template slot-scope="{row}">
                            <el-button type="danger" @click="del(row.id)">删除</el-button>
                            <el-button type="warning" @click="goupd(row)">修改</el-button>
                        </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 分页 -->
        <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchObj.currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="searchObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
       <!-- 弹窗 -->
      <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :close-on-click-modal="false"
  >
  
  <el-form label-width="70px" size="small" style="width:270px" :model="formObj">
    <el-form-item label="账号">
      <el-input type="text" v-model="formObj.account"></el-input>
    </el-form-item>
    <el-form-item label="用户组">
     <el-select v-model="formObj.userGroup">
       <el-option label="普通管理员" value="普通管理员"></el-option>
       <el-option label="超级管理员" value="超级管理员"></el-option>
     </el-select>
    </el-form-item>
  </el-form>


  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doupdate()">确 定</el-button>
  </span>
</el-dialog>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/comcard/index.vue";
import {api_query,api_delete,api_update} from "../../api/users.js";
import moment from "moment"
export default {
  filters: {
    timeMF(val) {
      return moment(val).format("YYYY-MM-DD hh:mm:ss");
    }
  },
   
  components: {
    ComCard
  },
  data() {
    return {
       formObj:{
        id:"",
        account:"",
        userGroup:""
      },
        dialogVisible:false,
      dataSource: [],
      //定义查询所需要的参数对象
      searchObj:{
        currentPage:1,  //当前所需要展示数据的页码
        pageSize:2  //每页显示的数据条数
      },
       total: 0 //记录总得数据条数
    };
  },
  // 定义mounted生命周期函数，用于在模板挂载之后执行
  mounted(){
    this.query();
  },
  methods:{
      
      // 定义query方法，用户获取账号信息
     async query(){
     let rst=  await api_query(this.searchObj);
     let {total,data}=rst;
     this.dataSource=data;
      this.total = total;
     console.log(rst);
      },

      // 当条数下拉框的值变化时触发的函数，且传递了当前的条数值
    handleSizeChange(s) {
      console.log(s);
      this.searchObj.pageSize = s;
      this.query();
    },
    // 当页码数变化时触发的函数
    handleCurrentChange(c) {
      this.searchObj.currentPage = c;
      this.query();
    },
    // 定义查询数据的方法
    async query() {
      let rst = await api_query(this.searchObj);
      let { data, total } = rst;
      this.dataSource = data;
      this.total = total;
      console.log(rst);
    },

    // 点击弹窗确定按钮触发的函数
   async doupdate(){
    let rst= await api_update(this.formObj);
    let {code,msg}=rst;
    if(code==0){
      // 关闭弹窗
      this.dialogVisible=false;
      this.query();
    }
    },
    // 点击弹窗确定按钮触发的函数
   async doupdate(){
    let rst= await api_update(this.formObj);
    let {code,msg}=rst;
    if(code==0){
      // 关闭弹窗
      this.dialogVisible=false;
      this.query();
    }
    },
 
   // 点击修改按钮触发的函数
    goupd(row){
      console.log(row);
      let {account,id,userGroup}=row;
      this.formObj={account,id,userGroup};
      this.dialogVisible=true;
    },
//删去
    del(id) {
  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async ()=>{
        // 发送根据id删除的api
          let rst= await api_delete({id});
          let {code}=rst;
          if(code==0){
            this.query();
          }
        },()=>{
            this.$message({
            type: 'info',
            message: '已取消删除'
          });   
        })
    }
  }
};
</script>

<style lang="less" scoped>
</style>